<template>
	<view class="t-login">
		<view class="t-b">{{title}}</view>
		<form class="cl">
			<view class="t-a">
				<image src="/static/login/account.png"></image>
				<input v-model="form.username" placeholder="请输入账号" />
			</view>
			<view class="t-a">
				<image src="/static/login/password.png"></image>
				<input v-model="form.password" placeholder="请输入密码" type="password" />
				<!-- <view class="t-c"></view> -->
			</view>

			<!-- 确认密码 -->
			<view class="t-a">
				<image src="/static/login/password.png"></image>
				<input v-model="form.confirmPassword" placeholder="请重新输入密码" type="password" />
				<!-- <view class="t-c"></view> -->
			</view>

			<view class="t-a">
				<image src="/static/login/code.png"></image>
				<!-- 使用flex布局让输入框和验证码图片在一行 -->
				<view class="t-code-wrapper">
					<input v-model="form.code" placeholder="请输入验证码" />
					<img :src="codeUrl" alt="验证码" @click="refreshCode" />
				</view>
			</view>

			<view class="reg">
				<text @click="handleUserRegister" class="reg-text">使用已有账号登录</text>
			</view>

			<!-- <view class="t-d">未注册的手机号验证后将自动注册</view> -->
			<button form-type="submit" @click="reg">注册</button>
		</form>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: '欢迎使用约球吧App',
				codeUrl: '',
				url: 'https://ext.dcloud.net.cn/plugin?id=3335',
				form: {
					username: '', // 用户输入的账号
					password: '', // 用户输入的密码
					confirmPassword: '',
					code: '',
					uuid: '',
					roleIds: 4
				}
			}
		},
		onLoad() {
			this.getCode()
		},
		methods: {



			getCode() {
				uni.request({
					url: '/api/captchaImage', // 完整后端路径
					method: 'GET', // 使用 GET 方法
					success: res => {
						if (res.statusCode === 200) {
							// uni.showToast({
							// 	title: '获取验证码成功',
							// 	icon: 'success'
							// });
							this.codeUrl = "data:image/gif;base64," + res.data.img;
							this.form.uuid = res.data.uuid
						} else {
							// uni.showToast({
							// 	title: res.data.msg || '登录失败',
							// 	icon: 'none'
							// });
						}
					},
					fail: err => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error('请求失败:', err);
					}
				});
			},


			reg() {
				if (!this.form.username || !this.form.password || !this.form.confirmPassword || !this.form.code) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				if (this.form.password !== this.form.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}

				// 发起请求
				uni.request({
					url: '/api/register', // 完整后端路径
					method: 'POST', // 使用 POST 方法
					data: this.form,
					success: res => {
						if (res.data.code === 200) {
							// 注册成功后显示提示
							uni.showToast({
								title: "注册成功",
								icon: 'success',
								duration: 1000 // 设置提示的显示时长，确保用户看到提示
							});

							// 在提示后延迟跳转到登录页面
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}, 1000); // 设置与提示相同的延迟时间（2秒）

						} else {
							// 注册失败时显示提示
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							this.getCode(); // 调用验证码获取方法
						}
					},
					fail: err => {
						// 请求失败时显示提示
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error('请求失败:', err);
						this.getCode(); // 调用验证码获取方法
					}
				});




			},



			refreshCode() {
				this.getCode()
			},

			// 去登录
			handleUserRegister() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}

		}

	}
</script>
<style>
	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000
	}

	.t-login button {
		font-size: 28rpx;
		background: #000;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f4f4f4;
		font-size: 28rpx;
		border-radius: 50rpx
	}

	.t-login .t-a {
		position: relative
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx
	}

	.t-login .t-b {
		text-align: center;
		font-size: 46rpx;
		color: #000;
		padding: 180rpx 0
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #000;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0
	}

	.t-login .t-g {
		float: left;
		width: 50%
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx
	}

	.t-login .t-f {
		text-align: center;
		margin: 80rpx 0 0 0;
		color: #666
	}

	.t-login .t-f text {
		margin-left: 8rpx;
		color: #999
	}

	.t-login .uni-input-placeholder {
		color: #000
	}

	.cl {
		zoom: 1
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20'
	}

	.t-code-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t-code-wrapper input {
		width: 150px;
		height: 90rpx;
		line-height: 90rpx;
		background: #f4f4f4;
		border-radius: 50rpx;
		padding: 0 30rpx 0 120rpx;
		/* 增加左内边距，避免与图标重叠 */
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.t-code-wrapper img {
		width: 160rpx;
		height: 80rpx;
		cursor: pointer;
		border-radius: 8rpx;
		margin-top: -25px;
	}

	.t-a image {
		width: 160rpx;
		/* 增加宽度 */
		height: 80rpx;
		/* 增加高度 */
		cursor: pointer;
		border-radius: 8rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;
		z-index: 1;
		/* 确保图标显示在输入框上层 */
	}

	.reg {
		margin-left: 100px;
		margin-bottom: 20px;
		font-size: 15px;
	}

	.reg-text {
		margin-left: 5px;
		color: aqua;
		cursor: pointer;
		/* 鼠标悬停时显示手指图标 */
		transition: color 0.3s;
		/* 添加颜色渐变效果 */
	}
</style>